<template>
  <div class="dialog-body">
    <div class="form-group">
      <label>预约日期</label>
      <input type="date" :value="formData.date" @input="updateDate($event)" class="form-input" :min="minDate">
    </div>
    <div class="form-group">
      <label>送药时间</label>
      <input type="time" :value="formData.time" @input="updateTime($event)" class="form-input">
    </div>
    
    <!-- 药品搜索框 -->
    <div class="form-group">
      <div class="search-container">
        <div class="search-box">
          <input 
            type="text" 
            v-model="medicineSearch" 
            class="form-input search-input" 
            placeholder="搜索药品名称"
          >
          <div class="search-icon">
            <font-awesome-icon icon="search" />
          </div>
        </div>
      </div>
    </div>

    <!-- 药品列表 -->
    <div class="form-group">
      <label>选择药品</label>
      <div class="medicine-list">
        <div 
          v-for="medicine in filteredMedicines" 
          :key="medicine.id"
          class="medicine-item"
          :class="{ active: selectedMedicines.some(m => m.id === medicine.id) }"
        >
          <div class="medicine-image" @click="showMedicineDetails(medicine)">
            <img :src="medicine.image" :alt="medicine.name">
          </div>
          <div class="medicine-info" @click="showMedicineDetails(medicine)">
            <h3>{{ medicine.name }}</h3>
            <p class="medicine-spec">{{ medicine.specification }}</p>
            <span class="medicine-price">¥{{ medicine.price }}/{{ medicine.unit }}</span>
          </div>
          <div class="medicine-quantity">
            <button 
              class="quantity-btn" 
              @click="updateMedicineQuantity(medicine.id, -1)"
              :disabled="!selectedMedicines.some(m => m.id === medicine.id)"
            >-</button>
            <span>{{ getMedicineQuantity(medicine.id) }}</span>
            <button 
              class="quantity-btn" 
              @click="updateMedicineQuantity(medicine.id, 1)"
              :disabled="!selectedMedicines.some(m => m.id === medicine.id)"
            >+</button>
            <button 
              class="select-btn"
              @click="toggleMedicine(medicine)"
            >{{ selectedMedicines.some(m => m.id === medicine.id) ? '取消' : '选择' }}</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 备注 -->
    <div class="form-group">
      <label>备注</label>
      <textarea 
        :value="formData.note" 
        @input="updateNote($event)"
        class="form-input" 
        rows="3" 
        placeholder="如有特殊要求请在此说明"
      ></textarea>
    </div>

    <!-- 药品详情弹窗 -->
    <div v-if="showDetails" class="medicine-details" @click.stop>
      <div class="details-header">
        <h2>{{ selectedMedicine.name }}</h2>
        <button class="close-btn" @click="closeDetails">
          <font-awesome-icon icon="times" />
        </button>
      </div>
      <div class="details-content">
        <div class="detail-row">
          <div class="detail-label">生产日期</div>
          <div class="detail-value">{{ selectedMedicine.productionDate }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">有效期至</div>
          <div class="detail-value">{{ selectedMedicine.expiryDate }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">生产厂家</div>
          <div class="detail-value">{{ selectedMedicine.manufacturer }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">规格</div>
          <div class="detail-value">{{ selectedMedicine.specification }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">适用症状</div>
          <div class="detail-value">{{ selectedMedicine.symptoms }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">注意事项</div>
          <ul class="precautions-list">
            <li v-for="(precaution, index) in selectedMedicine.precautions.split('\n')" 
                :key="index">{{ precaution }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { medicines } from '@/data/medicines';

export default {
  name: 'MedicineAppointment',
  props: {
    formData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      medicineSearch: '',
      selectedMedicines: [],
      showDetails: false,
      selectedMedicine: null
    };
  },
  computed: {
    minDate() {
      const today = new Date();
      return today.toISOString().split('T')[0];
    },
    filteredMedicines() {
      if (!this.medicineSearch) {
        return medicines;
      }
      const searchTerm = this.medicineSearch.toLowerCase();
      return medicines.filter(medicine => 
        medicine.name.toLowerCase().includes(searchTerm)
      );
    }
  },
  methods: {
    showMedicineDetails(medicine) {
      this.selectedMedicine = medicine;
      this.showDetails = true;
    },
    closeDetails() {
      this.showDetails = false;
      this.selectedMedicine = null;
    },
    toggleMedicine(medicine) {
      const index = this.selectedMedicines.findIndex(m => m.id === medicine.id);
      if (index === -1) {
        this.selectedMedicines.push({ ...medicine, quantity: 1 });
      } else {
        this.selectedMedicines.splice(index, 1);
      }
      this.$emit('update:formData', {
        ...this.formData,
        medicines: this.selectedMedicines
      });
    },
    getMedicineQuantity(medicineId) {
      const medicine = this.selectedMedicines.find(m => m.id === medicineId);
      return medicine ? medicine.quantity : 0;
    },
    updateMedicineQuantity(medicineId, change) {
      const medicine = this.selectedMedicines.find(m => m.id === medicineId);
      if (medicine) {
        const newQuantity = medicine.quantity + change;
        if (newQuantity > 0) {
          medicine.quantity = newQuantity;
          this.$emit('update:formData', {
            ...this.formData,
            medicines: [...this.selectedMedicines]
          });
        }
      }
    },
    validate() {
      if (this.selectedMedicines.length === 0) {
        return '请选择至少一种药品';
      }
      return '';
    },
    updateDate(event) {
      this.$emit('update:formData', {
        ...this.formData,
        date: event.target.value
      });
    },
    updateTime(event) {
      this.$emit('update:formData', {
        ...this.formData,
        time: event.target.value
      });
    },
    updateNote(event) {
      this.$emit('update:formData', {
        ...this.formData,
        note: event.target.value
      });
    }
  }
};
</script>

<style scoped>
.medicine-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px;
}

.medicine-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.medicine-item:hover {
  border-color: #3498db;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.medicine-item.active {
  border-color: #3498db;
  background-color: #f8f9fa;
}

.medicine-image {
  width: 80px;
  height: 80px;
  margin-right: 15px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.medicine-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.medicine-info {
  flex: 1;
  cursor: pointer;
}

.medicine-info h3 {
  margin: 0 0 5px;
  font-size: 16px;
  color: #2c3e50;
}

.medicine-spec {
  color: #7f8c8d;
  font-size: 14px;
  margin: 0 0 5px;
}

.medicine-price {
  color: #e74c3c;
  font-weight: 600;
}

.medicine-quantity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quantity-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: white;
  color: #2c3e50;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.select-btn {
  padding: 6px 12px;
  border: 1px solid #3498db;
  border-radius: 4px;
  background: white;
  color: #3498db;
  cursor: pointer;
  transition: all 0.3s ease;
}

.select-btn:hover {
  background: #3498db;
  color: white;
}

.quantity-btn:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #3498db;
}

.quantity-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 药品详情弹窗样式 */
.medicine-details {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1100;
  max-width: 500px;
  width: 90%;
}

.details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.details-header h2 {
  margin: 0;
  font-size: 20px;
  color: #2c3e50;
}

.details-content {
  max-height: 60vh;
  overflow-y: auto;
}

.detail-row {
  margin-bottom: 15px;
}

.detail-label {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 5px;
}

.detail-value {
  color: #7f8c8d;
}

.precautions-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.precautions-list li {
  margin-bottom: 5px;
  color: #e74c3c;
  padding-left: 20px;
  position: relative;
}

.precautions-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #e74c3c;
}

.search-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.search-box {
  position: relative;
  width: 300px;
}

.search-input {
  padding-right: 35px;
}

.search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #95a5a6;
  cursor: pointer;
  transition: color 0.3s ease;
}

.search-icon:hover {
  color: #3498db;
}
</style> 